<template>
  <ul class="blog-time-type-container reset-list flex-space">
    <li class="view flex-middle">
      <i class="iconfont icon-liulan"></i>
      <span>{{wordLike.browse || 0}}</span>
    </li>
    <li class="pointer like flex-middle" @click="handleLikeWord">
      <i
        :class="['iconfont', {'icon-liked': wordLike.likes.user_like}, {'icon-like': !wordLike.likes.user_like}]"
      ></i>
      <span>{{wordLike.likes.count || 0}}</span>
    </li>
    <li class="pointer view flex-middle">
      <i class="iconfont icon-shoucang"></i>
      <span>0</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    wordLike: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    }
  },

  methods: {
    handleLikeWord() {
      if (this.wordLike.likes.user_like) {
        this.$message({
          type: 'success',
          message: '您已经给这篇文章点过赞啦~'
        });
        return false;
      }
      this.$emit('like');
    }
  }
}
</script>

<style lang="scss" scoped>
.blog-time-type-container {
  padding: 10px 20px;
  border-top: 1px solid #f2f2f2;
  background-color: #fff;

  .icon-liked {
    color: #ff5656;
  }

  span {
    margin-left: 5px;
    user-select: none;
  }
}
</style>